<template>
  <div id="navSettings">
    <template v-if="!loading">
      <!-- 展示首页 -->
      <div class="homepage" v-if="navitationList">
        <h3 class="head_tit">展示首页</h3>
        <div class="bgbox">
          <div
            class="box"
            v-for="(item, i) in navitationList['selectedNavigation']"
            :key="i + 'i'"
            :class="isEdit ? 'martop' : ''"
            @click="toLink(item.path)"
          >
            <div class="imgBox">
              <img :src="item.icon" alt />
            </div>
            <p>{{ item.name }}</p>
            <img
              v-if="isEdit"
              @click="delRank(item, i)"
              class="edit"
              src="../../assets/three/delIcon.png"
            />
          </div>

          <div class="box" :class="isEdit ? 'martop' : ''">
            <div class="imgBox">
              <img v-if="!isEdit" @click="edit" src="../../assets/three/editIcon.png" />
              <img v-if="isEdit" @click="complete" src="../../assets/three/complete.png" />
            </div>

            <p v-if="!isEdit" @click="edit">编辑</p>
            <p v-if="isEdit" @click="complete">完成</p>
          </div>
        </div>
      </div>
      <!-- 全部榜单 -->
      <div v-if="navitationList" class="listbox public">
        <h3 class="head_tit">全部榜单</h3>
        <div class="allRank">
          <div
            class="itemRank"
            v-for="(item, i) in navitationList['rankNavigation']"
            :key="i + 'i'"
            :class="isEdit ? 'martop' : ''"
            @click="toLink(item.path)"
          >
            <div>
              <img :src="item.icon" alt />
            </div>
            <p>{{ item.name }}</p>
            <img
              v-if="isEdit && !item.sele"
              @click="
                addrank(item);
                item.sele = true;
              "
              class="edit"
              src="../../assets/three/addRankIcon.png"
            />
            <img v-if="isEdit && item.sele" class="edit" src="../../assets/three/selectIcon.png" />
          </div>
        </div>
      </div>
      <!-- 全部功能 -->
      <div v-if="navitationList" class="funbox public">
        <h3 class="head_tit">全部功能</h3>
        <div class="allRank">
          <div
            v-for="(item, i) in navitationList['funcNavigation']"
            :key="i + 'i'"
            class="itemRank"
            :class="isEdit ? 'martop' : ''"
            @click="toLink(item.path)"
          >
            <div>
              <img :src="item.icon" alt />
            </div>
            <p>{{ item.name }}</p>
            <img
              v-if="isEdit && !item.sele"
              @click="
                addrank(item);
                
              "
              class="edit"
              src="../../assets/three/addRankIcon.png"
            />
            <img v-if="isEdit && item.sele" class="edit" src="../../assets/three/selectIcon.png" />
          </div>
        </div>
      </div>
    </template>
    <van-loading size="24px" vertical type="spinner" class="navLoading" v-if="loading">拼命加载中...</van-loading>
  </div>
</template>
<script>
import Vue from 'vue';
import { Notify } from 'vant';
// import { debounce } from '../../common/utils';
export default {
  name: 'navSettings',
  data() {
    return {
      loading: false,
      isEdit: false,
      navitationList: null
    };
  },
  components: {},
  created() {
    // this.setNavitation();
    this.getNavitation();
  },
  mounted() {},
  methods: {
    // 非编辑状态下，路由跳转
    toLink(path) {
      // console.log(path);
      this.isEdit ? '' : this.$router.push(path);
    },
    //完成
    complete() {
      // if (this.navitationList.selectedNavigation.length < 3) {
      //   // 警告通知
      //   Notify({ type: 'warning', message: '最少选择三个' });
      //   return;
      // }
      // if (this.navitationList.selectedNavigation.length > 7) {
      //   // 警告通知
      //   Notify({ type: 'warning', message: '最多添加七个' });
      //   return;
      // }
      // 完成

      this.isEdit = false;
      let id = this.navitationList.selectedNavigation.map(item => {
        return item.id;
      });
      this.$axios.post('/api/customer/setNavitation', id).then(res => {
        // console.log(res);
        // if (res.data.code == 0) {
        //   this.navitationList = res.data.data;
        // }
        // this.$router.push('/');
      });
    },
    // 展示
    delRank(item, i) {
      if (this.navitationList.selectedNavigation.length < 4) {
        // 警告通知
        Notify({ type: 'warning', message: '最少选择三个' });
        return;
      }
      this.navitationList.selectedNavigation.splice(i, 1);
      for (let j = 0; j < this.navitationList.funcNavigation.length; j++)
        if (item.name == this.navitationList.funcNavigation[j].name) {
          for (let i = 0; this.navitationList.funcNavigation.length > i; i++) {
            if (this.navitationList.funcNavigation[i].id == item.id) {
              this.navitationList.funcNavigation[i].sele = false;
            }
          }
        } else {
          for (let i = 0; this.navitationList.rankNavigation.length > i; i++) {
            if (this.navitationList.rankNavigation[i].id == item.id) {
              this.navitationList.rankNavigation[i].sele = false;
            }
          }
        }
    },
    // 添加
    addrank(item) {
      if (this.navitationList.selectedNavigation.length > 6) {
        // 警告通知
        // Notify({ type: 'warning', message: '最多添加七个' });
        this.$toast('最多添加七个');
        return;
      }
      this.navitationList.selectedNavigation.push(item);
    },
    // 导航
    getNavitation() {
      this.loading = true;
      this.$axios.get('/api/customer/getNavitation').then(res => {
        this.loading = false;
        if (res.data.code == 0) {
          // debugger;
          this.navitationList = res.data.data;
          let arr = this.navitationList.selectedNavigation;
          let arrAll = this.navitationList.rankNavigation;
          for (let i = 0; i < arrAll.length; i++) {
            for (let j = 0; j < arr.length; j++) {
              if (arrAll[i].name == arr[j].name) {
                arrAll[i].sele = true;
                break;
              } else {
                arrAll[i].sele = false;
              }
            }
          }
          // console.log(arrAll);
          let arr1 = this.navitationList.selectedNavigation;
          let arr2 = this.navitationList.funcNavigation;
          for (let i = 0; i < arr2.length; i++) {
            for (let j = 0; j < arr1.length; j++) {
              if (arr2[i].name == arr1[j].name) {
                arr2[i].sele = true;
                break;
              } else {
                arr2[i].sele = false;
              }
            }
          }
        }
      });
    },

    edit() {
      this.isEdit = true;
      // this.getNavitation();
    }
  }
};
</script>
<style lang="less">
#navSettings {
  width: 100%;
  background-color: #f1f1f1;
  .head_tit {
    width: 100%;
    padding: 0 0.4rem;
    font-size: 0.4rem;
    color: #222;
    font-weight: 550;
    position: relative;
    box-sizing: border-box;
    text-indent: 0.266667rem;
  }
  .head_tit:after {
    content: '';
    position: absolute;
    left: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.053333rem;
    height: 0.346667rem;
    background-color: #fd7f2c;
    border: 1px solid #fd7f2c;
    border-radius: 3px;
  }
  // 展示首页
  .homepage {
    background: #fff;
    padding-top: 0.4rem;
    .bgbox {
      display: flex;
      flex-wrap: wrap;
      padding-bottom: 0.666667rem;
      .box {
        position: relative;
        align-self: center;
        text-align: center;
        margin-top: 0.666667rem;
        width: 25%;
        .imgBox {
          margin: auto;
          width: 0.8rem;
          height: 0.8rem;
          margin-bottom: 0.2rem;
          > img {
            vertical-align: top;
            width: 100%;
            height: 100%;
          }
        }

        > p {
          font-size: 0.346667rem;
          color: #222;
        }
      }
    }
  }
  .edit {
    width: 0.4rem;
    height: 0.4rem;
    position: absolute;
    right: 0.3rem;
    top: -0.15rem;
  }
  // 公共样式
  .public {
    margin-top: 0.186667rem;
    background: #fff;
    padding-top: 0.4rem;
    padding-bottom: 0.666667rem;
    .allRank {
      display: flex;
      flex-wrap: wrap;
      .itemRank {
        position: relative;
        margin-top: 8px;
        width: 25%;
        text-align: center;
        margin-top: 0.666667rem;
        > div {
          margin: auto;
          width: 0.8rem;
          height: 0.8rem;
          margin-bottom: 0.2rem;
          > img {
            vertical-align: top;
            width: 100%;
            height: 100%;
          }
        }
        > p {
          font-size: 0.346667rem;
          color: #222;
        }
      }
    }
  }
  // 选择编辑样式
  // .martop {
  //   margin-top: 0.933333rem !important;
  // }
}
</style>
